<template>
  <div class="custom_nav" :style="{height:navbarHeight+'px'}">
    <div class="navbar" :style="{top:statusBarHeight+'px',height:cusnavH+'px'}">
      <div
        class="navicon"
        :style="{height:navbarBtn.height+'px',lineHeight:(navbarBtn.height-2)+'px',top:navbarBtn.top+'px',left:navbarBtn.right+'px'}"
      >
        <div class="iconback" v-if="haveBack" @click="goBack">
          <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/ic_back_white@2x.png'" alt />
        </div>
        <div class="iconhome" v-if="!haveBack" @click="goHome">
          <img v-if="ossUrl" :src="ossUrl+'/mp_3.2.4/gohome.png'" alt />
        </div>
      </div>
      <div class="navtitle" :style="{height:cusnavH+'px',lineHeight:cusnavH+'px'}">跳蚤市场</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  props: {
    navTitle: {
      //标题
      type: String,
      default: ""
    }
  },
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮
      navbarHeight: 0, // 顶部导航栏高度
      statusBarHeight: 0, // 状态栏高度
      cusnavH: 0, //title高度
      navbarBtn: {
        // 胶囊位置信息
        height: 0,
        width: 0,
        top: 0,
        bottom: 0,
        right: 0
      }
    };
  },
  onLoad() {
    this.fn();
  },
  onShow(){
    this.fn();
  },
  methods: {
    fn() {
      //获取系统信息
      let SystemInfo = wx.getSystemInfoSync();
      // 获取胶囊位置信息
      let MenuBtn = wx.getMenuButtonBoundingClientRect();
      // 状态栏高度
      let statusBarHeight = SystemInfo.statusBarHeight;
      // 是否显示返回按钮
      let haveBack;
      // 当只有一个页面时，并且是从分享页进入
      if (getCurrentPages().length != 1) {
        haveBack = true;
      } else {
        haveBack = false;
      }
      // 胶囊实际位置（坐标信息不是左上角原点）
      let btnPosi = {
        height: MenuBtn.height,
        width: MenuBtn.width,
        top: MenuBtn.top - statusBarHeight, // 胶囊top - 状态栏高度,
        bottom: MenuBtn.bottom - MenuBtn.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度）
        right: SystemInfo.windowWidth - MenuBtn.right // 窗口宽度 - 胶囊right
      };
      // title高度
      var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom;
      // 附值
      this.haveBack = haveBack;
      this.statusBarHeight = statusBarHeight;
      this.navbarHeight = MenuBtn.bottom + btnPosi.bottom; // 胶囊bottom + 胶囊实际bottom
      this.navbarBtn = btnPosi;
      this.cusnavH = cusnavH;
    },
    // 返回上一页
    goBack() {
      wx.navigateBack({
        delta: 1
      });
    },
    // 回首页
    goHome() {
      wx.switchTab({
        url: "/pages/index/main"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.custom_nav {
  width: 100%;
  // border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 99999;
  .navbar {
    position: relative;
    z-index: 9;
    .navicon {
      position: absolute;
      vertical-align: center;
      font-size: 0;
      box-sizing: border-box;
      z-index: 2;
      .iconback {
        width: 11px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 11px;
          height: 16px;
        }
      }
      .iconhome {
        display: inline-block;
        width: 30px;
        text-align: center;
        vertical-align: top;
        height: 100%;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .navtitle {
      height: 20px;
      text-align: center;
      font-family: Helvetica;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 1px;
      position: absolute;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      top: 0;
      left: 0;
      right: 20px;
      bottom: 0;
      margin: auto;
      z-index: 1;
    }
  }
}
</style>